<template>
	<view>
		<!-- 设备类型  -->
		<view class="tab_w1 flex_a">
			<block v-for="item in typeList" :key="item.status">
				<view class="flex1 h80 lh80 border-r4 ft30 tac" :class="deviceType == item.status ? 'b-primary cf' : ''"
					@click="changeType(item.status)">{{ item.name }}</view>
			</block>
		</view>
		<!--设备状态  tab栏切换 -->
		<view class="tab_w2 flex_a">
			<block v-for="item in tabList" :key="item.status">
				<view class="flex1 h60 lh60 border-r4 tac" :class="activeTab == item.status ? 'b-primary cf' : ''"
					@click="tapTab(item.status)">{{ item.name }}</view>
			</block>
		</view>
		<view class="plr30 pt240">
			<block v-for="item in list" :key="item.id">
				<view class="mb30 plr30 bf border-r1 shadow">
					<view class="ptb20 bdb">
						<view class="flex_a h60">
							<text
								class="flex1">设备类型：{{ item.device_type == 1 ? '换电柜' : item.device_type == 2 ? '租车' : item.device_type == 3 ? '充电柜' : '' }}</text>
							<view class="flex_aj w60 h60 border-r50p" @click="navigation(item)">
								<image src="/static/daohang.png" mode="widthFix" style="width: 60upx;height: 60upx;">
								</image>
							</view>
						</view>
						<!-- <view class="h50">编号：{{ item.device_no }}</view> -->
						<view class="h50">自编号：{{ item.sn }}</view>
						<view class="h50">管理者：{{ item.operateName }}</view>
						<!-- 1：（在线）运行中 2: 离线 3: 设备故障 -->
						<view class="h50">
							当前状况：
							<text
								:class="item.device_status == 1 ? 'green' : item.device_status == 2 ? 'c9' : item.device_status == 3 ? 'danger' : 'c3'">
								{{ item.device_status == 1 ? '运行中' : item.device_status == 2 ? '离线' : item.device_status == 3 ? '设备故障' : '--' }}
							</text>
						</view>
						<view class="flex">
							<text class="whn">设备地址：</text>
							<text class="flex1">{{ item.address }}</text>
						</view>
					</view>
					<view class="flex_a jce h80">
						<view class="flex_a" @click="routerLink({ path: '/pages/admin/device/detail', 
							query: { type: item.device_type, deviceId: item.id, lat: query.lat, lng: query.lng } })">
							<text class="pr10 c9">设备详情</text>
							<u-icon name="arrow-right" color="#999" size="26"></u-icon>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		myDeviceList
	} from '@/api/admin.js'
	export default {
		name: 'deviceList',
		data() {
			return {
				typeList: [{
					name: '充电柜',
					status: 3
				}, {
					name: '换电柜',
					status: 1
				}], // 设备类型
				deviceType: 3,
				activeTab: 0, // 0 全部 1 正常 2 异常
				tabList: [{
					name: '全部',
					status: 0
				}, {
					name: '正常',
					status: 1
				}, {
					name: '异常',
					status: 2
				}], // 设备状态
				list: [],
				query: {}
			}
		},
		onLoad(e) {
			this.query = e
			this.myDeviceList()
		},
		onShow() {},
		onHide() {},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin
			}
		},
		methods: {
			// 跳转设备详情页面的方法
			// shebeixqing(item) {
			// 	let pi = (3.14159265358979324 * 3000.0) / 180.0;
			// 	let x = item.lng - 0.0065;
			// 	let y = item.lat - 0.006;
			// 	let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
			// 	let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
			// 	item.lng = z * Math.cos(theta);
			// 	item.lat = z * Math.sin(theta);
			// 	this.routerLink({
			// 		path: '/pages/admin/device/detail',
			// 		query: {
			// 			type: item.device_type,
			// 			deviceId: item.id,
			// 			lat: item.lat,
			// 			lng: item.lng
			// 		}
			// 	})
			// },
			// 点击tab栏
			changeType(status) {
				this.deviceType = status
				this.myDeviceList()
			},
			tapTab(status) {
				this.activeTab = status
				this.myDeviceList()
			},

			async myDeviceList() {
				const res = await myDeviceList({
					deviceType: this.deviceType,
					type: this.activeTab
				})
				this.list = res.rows

			},
			navigation(item) {
				// 因后端传过来的经纬度是百度的，所以要经过转化成腾讯经纬度
				// let lng = item.lng
				// let lat = item.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.openLocation({
					latitude: item.lat * 1,
					longitude: item.lng * 1,
					name: item.device_name,
					address: item.address,
					success: () => {}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab_w1,
	.tab_w2 {
		position: fixed;
		top: 16upx;
		left: 30upx;
		width: 690upx;
		height: 100upx;
		padding: 10upx 14upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50upx;
		overflow: hidden;
		box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
	}

	.tab_w2 {
		top: 130upx;
		height: 80upx;
	}
</style>
